<template>
  <div class="signin">
  <nav-bar>
        <template v-slot:left>
            <van-icon name="arrow-left" @click="backHome" />
          </template>
          <template v-slot:center>注册</template>
  </nav-bar>
     <div class="content">
          <div class="login_bg">
          <div class="login_con">
              美团
          </div>
      </div>
        <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit" color="#ffc400" >
             注册
            </van-button>
                 <van-button round block type="primary" native-type="submit" color="#ffc400" class="regisiter" @click="toLogin">
            已有账号去登录
            </van-button>
  </div>
</van-form>
   </div>
  </div>
</template>

<script>
import NavBar from '../components/common/NavBar.vue'
import { reactive, toRefs } from '@vue/reactivity'
import { Toast } from 'vant'
import {useRouter} from 'vue-router'
export default {
   name:'Regisiter',
   components:{
       NavBar
   },
     setup(){
      const router = useRouter();
      let data = reactive({
          username:'',
          password:''
      })
    const backHome =()=>{
        router.back();
    }
    //    提交按钮
      const onSubmit =(value)=>{
        if(localStorage.userInfo){
            let userInfo = JSON.parse(localStorage.userInfo)
                if(userInfo['用户名']==value['用户名']){
                    Toast('该账号已存在')
                    return ;
                }else{
                    regisiter();
                }
        }else{
                 regisiter(value);
            }
        }

        // 注册
        const regisiter = (value)=>{
            Toast.success('注册成功')
            localStorage.setItem("userInfo",JSON.stringify(value))
            router.push('/login')
        }
        // 去登录
        const toLogin =()=>{
            router.push('/login')
        }
      return{
          ...toRefs(data),
          onSubmit,
          toLogin,
          backHome
      }
  }
}
</script>
<style scoped lang="less">
.signin{
    height: 100vh;
    background-color: #f4f4f4;
    .content{
        .login_bg{
            width: 100%;
            height:30vh;
            margin: 10px 0 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 16px;
            .login_con{
                width: 150px;
                height: 150px;
                background-color: #ffc400;
                border-radius: 16px;
                text-align: center;
                line-height: 150px;
                font-size: 50px;
                font-weight: 400;
            }
        }
        .regisiter{
            margin-top: 20px;
        }
    }
}
</style>